<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物MBTI性格测试</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --pink: #FF69B4;
            --light-pink: #FFB6C1;
            --light-purple: #9370DB;
            --dark-purple: #4B0082;
            --green: #32CD32;
            --dark-green: #228B22;
            --blue: #4169E1;
            --light-blue: #E6E6FA;
            --white: #FFFFFF;
            --light-gray: #F5F5F5;
            --gray: #888888;
            --dark-gray: #333333;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #fff0f5, #e6e6fa);
            min-height: 100vh;
            padding: 20px;
            color: var(--dark-gray);
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .page {
            display: none;
            padding: 30px;
        }

        .active {
            display: block;
        }

        header {
            text-align: center;
            padding: 30px 0;
        }

        h1 {
            font-size: 2.5rem;
            color: var(--pink);
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        h2 {
            font-size: 1.5rem;
            color: var(--light-purple);
            margin-bottom: 30px;
            font-weight: 500;
        }

        .btn {
            display: block;
            width: 100%;
            max-width: 300px;
            margin: 15px auto;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .btn-pet {
            background-color: #FFF0F5;
            border: 2px solid var(--light-pink);
            color: #DB7093;
        }

        .btn-pet:hover {
            background-color: #FFE4E1;
            border-color: var(--pink);
        }

        .btn-upload {
            background-color: var(--light-purple);
            color: var(--white);
        }

        .btn-upload:hover {
            background-color: #7B68EE;
        }

        .btn-next {
            background-color: var(--green);
            color: var(--white);
        }

        .btn-next:hover {
            background-color: var(--dark-green);
        }

        .btn-back {
            background-color: #DCDCDC;
            color: #555;
        }

        .btn-back:hover {
            background-color: #C0C0C0;
        }

        .btn-restart {
            background-color: var(--light-purple);
            color: var(--white);
        }

        .btn-save {
            background-color: var(--green);
            color: var(--white);
        }

        .btn-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .btn-group .btn {
            max-width: 180px;
        }

        .pet-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 1.1rem;
            color: #555;
        }

        .photo-frame {
            width: 100%;
            max-width: 500px;
            height: 400px;
            margin: 0 auto 30px;
            border: 3px solid var(--light-pink);
            border-radius: 10px;
            background-color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .photo-frame img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .photo-placeholder {
            color: #999;
            font-size: 1.2rem;
        }

        .question-box {
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid var(--light-pink);
            border-radius: 15px;
            padding: 25px;
            margin-top: 20px;
        }

        .question-text {
            font-size: 1.3rem;
            margin-bottom: 25px;
            color: #333;
            line-height: 1.5;
        }

        .options-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .option {
            padding: 15px;
            border-radius: 8px;
            background: var(--white);
            border: 1px solid #ddd;
            cursor: pointer;
            transition: all 0.2s;
        }

        .option:hover {
            background: #F0F8FF;
            border-color: var(--blue);
        }

        .option.selected {
            background: #E6F7FF;
            border-color: var(--blue);
            box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.3);
        }

        .result-box {
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid var(--light-purple);
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
        }

        .result-title {
            font-size: 1.8rem;
            color: var(--pink);
            margin-bottom: 25px;
            text-align: center;
        }

        .mbti-type {
            font-size: 1.8rem;
            font-weight: bold;
            color: #FF4500;
            margin-bottom: 15px;
        }

        .type-name {
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 20px;
        }

        .traits-list {
            font-size: 1.2rem;
            margin-bottom: 30px;
            line-height: 1.8;
        }

        .traits-list li {
            margin-left: 25px;
        }

        .analysis-box {
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid var(--dark-purple);
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
        }

        .analysis-content {
            background: #FFF8FF;
            border: 1px solid #DDA0DD;
            border-radius: 8px;
            padding: 20px;
            font-size: 1.1rem;
            line-height: 1.7;
            max-height: 300px;
            overflow-y: auto;
        }

        footer {
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
            padding: 20px 0;
            margin-top: 30px;
        }

        .progress-bar {
            height: 10px;
            background: #e0e0e0;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: var(--pink);
            width: 0%;
            transition: width 0.5s ease;
        }

        .report-notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--green);
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        @media (max-width: 768px) {
            .container {
                border-radius: 10px;
            }

            .page {
                padding: 15px;
            }

            h1 {
                font-size: 2rem;
            }

            h2 {
                font-size: 1.2rem;
            }

            .btn {
                padding: 12px;
                font-size: 1rem;
            }

            .btn-group {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .btn-group .btn {
                max-width: 100%;
            }

            .photo-frame {
                height: 300px;
            }

            .question-text {
                font-size: 1.1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 宠物选择页面 -->
        <div id="page-pet-selection" class="page active">
            <header>
                <h1>宠物性格测试</h1>
                <h2>发现您宠物的真实性格类型</h2>
            </header>

            <div class="pets-group">
                <button class="btn btn-pet" data-pet="仓鼠">仓鼠</button>
                <button class="btn btn-pet" data-pet="猫">猫</button>
                <button class="btn btn-pet" data-pet="狗">狗</button>
                <button class="btn btn-pet" data-pet="龙猫">龙猫</button>
                <button class="btn btn-pet" data-pet="荷兰猪">荷兰猪</button>
            </div>

            <footer>
                © 2023 宠物MBTI测试
            </footer>
        </div>

        <!-- 照片上传页面 -->
        <div id="page-photo-upload" class="page">
            <header>
                <h1 id="upload-title">正在测试: <span id="pet-type-name"></span></h1>
            </header>

            <div class="photo-frame">
                <div id="photo-placeholder" class="photo-placeholder">请上传宠物照片</div>
                <img id="pet-photo" style="display: none;" alt="宠物照片">
            </div>

            <input type="file" id="photo-upload" accept="image/*" style="display: none;">
            <button class="btn btn-upload" id="btn-upload">选择照片</button>

            <div class="btn-group">
                <button class="btn btn-back" id="btn-back">返回</button>
                <button class="btn btn-next" id="btn-start-test" disabled>开始测试</button>
            </div>
        </div>

        <!-- 测试问题页面 -->
        <div id="page-test" class="page">
            <div class="pet-info">
                <span id="pet-info">宠物类型: <span id="current-pet-type"></span></span>
                <span id="progress">进度: <span id="current-question">0</span>/<span id="total-questions">0</span></span>
            </div>

            <div class="progress-bar">
                <div class="progress" id="progress-bar"></div>
            </div>

            <div class="question-box">
                <div class="question-text" id="question-text"></div>
                <div class="options-group" id="options-container"></div>
            </div>

            <div class="btn-group">
                <button class="btn btn-back" id="btn-prev">上一题</button>
                <button class="btn btn-next" id="btn-next">下一题</button>
            </div>
        </div>

        <!-- 结果页面 -->
        <div id="page-result" class="page">
            <h1 class="result-title" id="result-title">宠物性格分析报告</h1>

            <div class="photo-frame">
                <img id="result-photo" alt="宠物照片">
            </div>

            <div class="result-box">
                <div class="mbti-type" id="mbti-type">MBTI类型: <span id="mbti-result"></span></div>
                <div class="type-name" id="type-name">类型名称: <span id="mbti-name"></span></div>
                <div class="traits-list" id="traits-list"></div>
            </div>

            <div class="analysis-box">
                <h2>详细分析</h2>
                <div class="analysis-content" id="analysis-content"></div>
            </div>

            <div class="btn-group">
                <button class="btn btn-restart" id="btn-restart">重新测试</button>
                <button class="btn btn-save" id="btn-save">保存报告</button>
            </div>
        </div>
    </div>

    <!-- 报告下载通知 -->
    <div class="report-notification" id="report-notification">报告已生成并开始下载！</div>

    <script>
        // 宠物类型和MBTI描述数据
        const PET_TYPES = ["仓鼠", "猫", "狗", "龙猫", "荷兰猪"];

        const MBTI_DESC = {
            "ISTJ": {
                "name": "守序者",
                "traits": ["严谨可靠", "喜欢规律作息", "注重细节", "有责任感", "做事有条理"],
                "description": "您的宠物是可靠的守护者，注重规律和秩序。它们喜欢可预测的环境和明确的规则，对熟悉的人和事物表现出极大的忠诚。",
                "interaction": "为TA建立固定的作息时间表，提供整洁有序的生活空间。避免突然改变环境，给予明确的指令和奖励。"
            },
            "ISTP": {
                "name": "巧匠",
                "traits": ["动手能力强", "独立自主", "善于解决问题", "好奇心重", "喜欢探索"],
                "description": "您的宠物是灵活的实践者，善于解决实际问题。它们喜欢探索环境，通过直接体验来理解世界，对变化有很强的适应能力。",
                "interaction": "提供丰富的益智玩具和探索机会，允许TA独立解决问题。避免过度干涉TA的活动，给予足够的自由空间。"
            },
            "ISFJ": {
                "name": "守护者",
                "traits": ["忠诚体贴", "有责任感", "重视传统", "细心周到", "善于照顾"],
                "description": "您的宠物是贴心的照顾者，非常关注主人的需求和情绪。它们会建立强烈的归属感，对熟悉的环境表现出极大的依恋。",
                "interaction": "建立稳定的情感连接，定期进行亲密互动。保持环境的一致性，避免频繁改变TA的生活空间。"
            },
            "ISFP": {
                "name": "艺术家",
                "traits": ["温和友善", "审美敏锐", "享受当下", "富有同情心", "追求和谐"],
                "description": "您的宠物是温和的艺术家，对美感和舒适有特别的追求。它们喜欢和谐的环境，通过温和的方式表达情感，对冲突非常敏感。",
                "interaction": "创造温馨舒适的生活环境，提供艺术性玩具。尊重TA的个性空间，用温和的方式互动，避免强迫行为。"
            },
            "INFJ": {
                "name": "倡导者",
                "traits": ["富有洞察力", "理想主义", "有使命感", "善解人意", "富有创造力"],
                "description": "您的宠物是理想主义的倡导者，对环境和情绪变化非常敏感。它们有强烈的直觉能力，能感知主人的情绪状态并做出反应。",
                "interaction": "保持情绪稳定，提供安静思考空间。通过温和的眼神交流建立信任，避免嘈杂混乱的环境。"
            },
            "INFP": {
                "name": "治愈者",
                "traits": ["充满热情", "富有创造力", "价值观明确", "善解人意", "富有想象力"],
                "description": "您的宠物是充满创造力的治愈者，有着丰富的内心世界。它们通过独特的方式表达情感，对不公正的环境非常敏感。",
                "interaction": "鼓励TA的创造性行为，提供表达个性的机会。尊重TA的情感需求，创造安全自由的成长空间。"
            },
            "INTJ": {
                "name": "战略家",
                "traits": ["思维严谨", "独立自主", "善于规划", "目标明确", "理性分析"],
                "description": "您的宠物是独立的思想家，善于制定长期计划。它们对环境有很强的控制欲，喜欢按照自己的方式安排生活空间。",
                "interaction": "提供智力挑战游戏，尊重TA的独立空间。用逻辑性方式沟通，避免情绪化互动。"
            },
            "INTP": {
                "name": "学者",
                "traits": ["逻辑性强", "好奇心重", "善于分析", "独立思考", "追求知识"],
                "description": "您的宠物是好奇的探索者，对事物的工作原理充满兴趣。它们会花大量时间观察环境，通过实验了解世界的运作方式。",
                "interaction": "提供丰富的探索机会和益智玩具。鼓励TA的观察行为，耐心解答TA的'好奇心'。"
            },
            "ESTP": {
                "name": "冒险家",
                "traits": ["精力充沛", "灵活应变", "活在当下", "勇敢果断", "喜欢挑战"],
                "description": "您的宠物是精力充沛的冒险家，喜欢即兴活动和刺激体验。它们对环境变化反应迅速，总是寻找新的探索机会。",
                "interaction": "提供充足的运动空间和冒险机会。保持活动多样性，避免单调重复。确保环境安全，防止过度冒险。"
            },
            "ESTJ": {
                "name": "管理者",
                "traits": ["高效务实", "组织能力强", "重视秩序", "有责任感", "领导能力强"],
                "description": "您的宠物是高效的组织者，喜欢建立明确的日常规律。它们对环境的秩序有强烈需求，会主动维护生活空间的整洁。",
                "interaction": "建立清晰的生活规则和作息时间。给予TA一定的'管理'空间，如监督其他宠物。认可TA的组织行为。"
            },
            "ESFP": {
                "name": "表演者",
                "traits": ["活泼开朗", "善于交际", "享受生活", "富有魅力", "即兴发挥"],
                "description": "您的宠物是活泼的表演者，喜欢成为关注的焦点。它们通过肢体语言和声音表达情感，善于与主人建立情感连接。",
                "interaction": "提供社交机会和表演舞台。及时回应TA的互动请求，给予充分关注和赞美。保持互动趣味性。"
            },
            "ESFJ": {
                "name": "组织者",
                "traits": ["乐于助人", "社交能力强", "注重和谐", "体贴周到", "善于合作"],
                "description": "您的宠物是社交的协调者，对群体互动有强烈需求。它们会主动参与家庭活动，对家庭成员的情绪变化非常敏感。",
                "interaction": "提供群体互动机会，让TA参与家庭活动。认可TA的关怀行为，建立和谐的家庭氛围。"
            },
            "ENFP": {
                "name": "激发者",
                "traits": ["热情洋溢", "富有想象力", "善于沟通", "充满创意", "乐观积极"],
                "description": "您的宠物是热情的激发者，充满好奇心和想象力。它们喜欢探索新环境，通过积极互动建立与主人的深厚情感。",
                "interaction": "提供新颖的玩具和探索机会。保持互动趣味性，鼓励TA的创意行为。避免单调重复的活动。"
            },
            "ENFJ": {
                "name": "教育家",
                "traits": ["善于领导", "富有同理心", "鼓舞他人", "关心他人", "善于沟通"],
                "description": "您的宠物是充满魅力的领导者，善于协调群体关系。它们会主动照顾其他宠物，在家庭中扮演保护者的角色。",
                "interaction": "给予TA'领导'机会，如照顾其他宠物。认可TA的关怀行为，提供社交互动空间。"
            },
            "ENTP": {
                "name": "辩论家",
                "traits": ["思维敏捷", "创意无限", "喜欢挑战", "善于分析", "充满活力"],
                "description": "您的宠物是充满创意的探索者，对新奇事物充满好奇。它们喜欢智力挑战，善于发现环境中的新可能性。",
                "interaction": "提供智力挑战和问题解决机会。鼓励TA的创新行为，保持环境的新鲜感。避免过度约束。"
            },
            "ENTJ": {
                "name": "指挥官",
                "traits": ["果断坚决", "战略思维", "善于组织", "领导力强", "目标导向"],
                "description": "您的宠物是天生的领导者，喜欢组织和控制环境。它们表现出强烈的自信，在熟悉的环境中会主动建立规则和秩序。",
                "interaction": "给予TA一定的'管理'空间，如监督其他宠物。提供组织性活动，认可TA的领导行为。避免过度干涉TA的计划。"
            }
        };

        // 测试题库
        const QUESTIONS = {
            "仓鼠": [
                {"text": "在新环境中，TA的表现是？", "options": ["立即探索所有角落", "先观察再行动", "紧张躲藏"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "对玩具的偏好是？", "options": ["跑轮等运动类", "啃咬类", "藏身类"], "dimension": "SN", "weights": [1, 0.5, -1]},
                {"text": "被主人抚摸时的反应？", "options": ["主动亲近", "无所谓", "躲避抗拒"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "进食习惯如何？", "options": ["定时定量", "少量多次", "随时进食"], "dimension": "JP", "weights": [1, 0, -1]},
                {"text": "与其他仓鼠相处时？", "options": ["主动社交", "选择性互动", "回避接触"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "对新鲜食物的态度？", "options": ["立即尝试", "谨慎观察", "完全拒绝"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "被抱起时的反应？", "options": ["安静享受", "轻微挣扎", "激烈反抗"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "日常活动模式？", "options": ["夜间活跃", "白天活跃", "全天间歇活动"], "dimension": "JP", "weights": [1, 0.5, -0.5]},
                {"text": "面对陌生物体时？", "options": ["立即接触", "保持距离观察", "躲藏"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "清洁习惯如何？", "options": ["固定时间沙浴", "随时沙浴", "很少沙浴"], "dimension": "JP", "weights": [1, 0.5, -1]}
            ],
            "猫": [
                {"text": "对陌生人的反应？", "options": ["主动靠近", "观察后接近", "躲藏或攻击"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "玩耍时的专注度？", "options": ["高度专注捕猎", "玩一会儿就失去兴趣", "完全不理睬"], "dimension": "JP", "weights": [1, 0, -1]},
                {"text": "日常作息规律？", "options": ["非常固定", "随心情变化", "日夜颠倒"], "dimension": "JP", "weights": [1, 0, -1]},
                {"text": "被抱起时的反应？", "options": ["呼噜享受", "适度挣扎", "强烈反抗"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "对高处位置的态度？", "options": ["经常攀爬", "偶尔上去", "从不尝试"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "面对其他猫时？", "options": ["主动社交", "保持距离", "攻击性反应"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "对新玩具的反应？", "options": ["立即探索", "观察后接触", "完全忽视"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "梳理毛发频率？", "options": ["非常频繁", "适度梳理", "很少梳理"], "dimension": "JP", "weights": [1, 0.5, -1]},
                {"text": "被限制行动时？", "options": ["安静接受", "适度挣扎", "激烈反抗"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "环境变化时的反应？", "options": ["快速适应", "缓慢适应", "持续焦虑"], "dimension": "JP", "weights": [1, 0, -1]}
            ],
            "狗": [
                {"text": "散步时的行为？", "options": ["兴奋探索新路线", "固定路线最安心", "只想回家"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "与其他狗相处？", "options": ["主动社交", "选择性社交", "回避或冲突"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "训练学习速度？", "options": ["很快掌握新指令", "需要多次重复", "完全不理指令"], "dimension": "JP", "weights": [1, 0, -1]},
                {"text": "主人回家时的反应？", "options": ["极度兴奋迎接", "适度欢迎", "冷淡反应"], "dimension": "TF", "weights": [1, 0.5, -1]},
                {"text": "对新环境的适应？", "options": ["立即探索", "谨慎观察", "焦虑不安"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "玩具偏好类型？", "options": ["互动类玩具", "啃咬类玩具", "毛绒玩具"], "dimension": "SN", "weights": [1, 0.5, -0.5]},
                {"text": "独处时的行为？", "options": ["安静休息", "适度焦虑", "破坏性行为"], "dimension": "JP", "weights": [1, 0, -1]},
                {"text": "被训斥时的反应？", "options": ["明显沮丧", "适度反应", "完全不在乎"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "面对陌生人的态度？", "options": ["立即亲近", "观察后接近", "警惕吠叫"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "日常作息规律？", "options": ["严格遵循", "基本遵守", "毫无规律"], "dimension": "JP", "weights": [1, 0.5, -1]}
            ],
            "龙猫": [
                {"text": "日常活动模式？", "options": ["夜间活跃", "白天活跃", "全天间歇活动"], "dimension": "EI", "weights": [1, -1, 0]},
                {"text": "对新食物的态度？", "options": ["立即尝试", "谨慎观察", "完全拒绝"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "清洁习惯？", "options": ["固定时间沙浴", "随时沙浴", "很少沙浴"], "dimension": "JP", "weights": [1, 0.5, -1]},
                {"text": "被抱起时的反应？", "options": ["安静不动", "适度挣扎", "强烈挣扎"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "对新玩具的反应？", "options": ["立即探索", "缓慢接近", "完全忽视"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "环境温度变化时？", "options": ["适应良好", "适度不适", "明显焦虑"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "社交需求程度？", "options": ["需要同伴", "可有可无", "喜欢独处"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "进食行为？", "options": ["定时定量", "少量多次", "随时进食"], "dimension": "JP", "weights": [1, 0.5, -1]},
                {"text": "面对陌生声音时？", "options": ["好奇探查", "保持警惕", "躲藏"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "梳理毛发频率？", "options": ["非常频繁", "适度梳理", "很少梳理"], "dimension": "JP", "weights": [1, 0.5, -1]}
            ],
            "荷兰猪": [
                {"text": "社交需求程度？", "options": ["必须同伴陪伴", "可有可无", "喜欢独处"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "进食行为？", "options": ["定时定量", "少量多次", "随时进食"], "dimension": "JP", "weights": [1, 0.5, -1]},
                {"text": "被抱起时的反应？", "options": ["安静享受", "轻微挣扎", "激烈反抗"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "对新环境的适应？", "options": ["快速适应", "缓慢适应", "持续紧张"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "对新鲜蔬菜的态度？", "options": ["立即尝试", "谨慎观察", "完全拒绝"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "日常活动模式？", "options": ["白天活跃", "夜间活跃", "全天均衡"], "dimension": "JP", "weights": [1, -1, 0]},
                {"text": "被抚摸时的反应？", "options": ["发出满足声", "安静接受", "躲避接触"], "dimension": "TF", "weights": [1, 0, -1]},
                {"text": "面对陌生物体时？", "options": ["立即探查", "保持距离", "躲藏"], "dimension": "SN", "weights": [1, 0, -1]},
                {"text": "与主人互动时？", "options": ["主动接近", "被动接受", "回避互动"], "dimension": "EI", "weights": [1, 0, -1]},
                {"text": "清洁习惯如何？", "options": ["自我清洁频繁", "适度清洁", "很少清洁"], "dimension": "JP", "weights": [1, 0.5, -1]}
            ]
        };

        // 应用状态
        const appState = {
            petType: "",
            photoData: "",
            answers: {},
            currentQuestion: 0
        };

        // DOM元素
        const pages = {
            petSelection: document.getElementById('page-pet-selection'),
            photoUpload: document.getElementById('page-photo-upload'),
            test: document.getElementById('page-test'),
            result: document.getElementById('page-result')
        };

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            // 宠物选择
            document.querySelectorAll('.btn-pet').forEach(btn => {
                btn.addEventListener('click', () => {
                    appState.petType = btn.dataset.pet;
                    document.getElementById('pet-type-name').textContent = appState.petType;
                    document.getElementById('current-pet-type').textContent = appState.petType;
                    showPage('photoUpload');
                });
            });

            // 照片上传
            document.getElementById('btn-upload').addEventListener('click', () => {
                document.getElementById('photo-upload').click();
            });

            document.getElementById('photo-upload').addEventListener('change', (e) => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        appState.photoData = event.target.result;
                        document.getElementById('pet-photo').src = appState.photoData;
                        document.getElementById('pet-photo').style.display = 'block';
                        document.getElementById('photo-placeholder').style.display = 'none';
                        document.getElementById('btn-start-test').disabled = false;
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 开始测试
            document.getElementById('btn-start-test').addEventListener('click', () => {
                startTest();
            });

            // 返回按钮
            document.getElementById('btn-back').addEventListener('click', () => {
                showPage('petSelection');
            });

            // 上一题
            document.getElementById('btn-prev').addEventListener('click', () => {
                if (appState.currentQuestion > 0) {
                    appState.currentQuestion--;
                    showQuestion();
                }
            });

            // 下一题
            document.getElementById('btn-next').addEventListener('click', () => {
                if (appState.currentQuestion in appState.answers) {
                    if (appState.currentQuestion < QUESTIONS[appState.petType].length - 1) {
                        appState.currentQuestion++;
                        showQuestion();
                    } else {
                        generateReport();
                    }
                } else {
                    alert('请先选择一个选项');
                }
            });

            // 重新测试
            document.getElementById('btn-restart').addEventListener('click', () => {
                showPage('petSelection');
                resetAppState();
            });

            // 保存报告
            document.getElementById('btn-save').addEventListener('click', () => {
                saveReport();
            });
        });

        // 显示页面
        function showPage(pageName) {
            Object.values(pages).forEach(page => page.classList.remove('active'));
            pages[pageName].classList.add('active');
        }

        // 开始测试
        function startTest() {
            appState.answers = {};
            appState.currentQuestion = 0;
            showPage('test');
            showQuestion();
        }

        // 重置应用状态
        function resetAppState() {
            appState.petType = "";
            appState.photoData = "";
            appState.answers = {};
            appState.currentQuestion = 0;
            document.getElementById('pet-photo').style.display = 'none';
            document.getElementById('photo-placeholder').style.display = 'block';
            document.getElementById('btn-start-test').disabled = true;
        }

        // 显示问题
        function showQuestion() {
            const questions = QUESTIONS[appState.petType];
            const question = questions[appState.currentQuestion];

            // 更新进度信息
            document.getElementById('current-question').textContent = appState.currentQuestion + 1;
            document.getElementById('total-questions').textContent = questions.length;
            document.getElementById('progress-bar').style.width = `${(appState.currentQuestion + 1) / questions.length * 100}%`;

            // 设置问题文本
            document.getElementById('question-text').textContent =
                `问题 ${appState.currentQuestion + 1}/${questions.length}: ${question.text}`;

            // 创建选项
            const optionsContainer = document.getElementById('options-container');
            optionsContainer.innerHTML = '';

            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option';
                if (appState.answers[appState.currentQuestion] === index) {
                    optionElement.classList.add('selected');
                }
                optionElement.textContent = option;

                optionElement.addEventListener('click', () => {
                    // 移除之前的选择
                    document.querySelectorAll('.option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    // 设置当前选择
                    optionElement.classList.add('selected');
                    appState.answers[appState.currentQuestion] = index;
                });

                optionsContainer.appendChild(optionElement);
            });

            // 更新按钮状态
            document.getElementById('btn-prev').disabled = appState.currentQuestion === 0;
            document.getElementById('btn-next').textContent =
                appState.currentQuestion < questions.length - 1 ? '下一题' : '完成测试';
        }

        // 计算MBTI类型
        function calculateMBTI() {
            const dimensionScores = {
                'E': 0, 'I': 0,
                'S': 0, 'N': 0,
                'T': 0, 'F': 0,
                'J': 0, 'P': 0
            };

            const questions = QUESTIONS[appState.petType];
            for (const [qIndex, answerIndex] of Object.entries(appState.answers)) {
                const question = questions[parseInt(qIndex)];
                const weight = question.weights[answerIndex];
                const dimension = question.dimension;

                // 根据问题的维度分配分数
                switch (dimension) {
                    case "EI":
                        dimensionScores['E'] += weight;
                        dimensionScores['I'] -= weight;
                        break;
                    case "SN":
                        dimensionScores['S'] += weight;
                        dimensionScores['N'] -= weight;
                        break;
                    case "TF":
                        dimensionScores['T'] += weight;
                        dimensionScores['F'] -= weight;
                        break;
                    case "JP":
                        dimensionScores['J'] += weight;
                        dimensionScores['P'] -= weight;
                        break;
                }
            }

            // 确定MBTI类型
            let mbtiType = "";
            mbtiType += dimensionScores['E'] >= dimensionScores['I'] ? 'E' : 'I';
            mbtiType += dimensionScores['S'] >= dimensionScores['N'] ? 'S' : 'N';
            mbtiType += dimensionScores['T'] >= dimensionScores['F'] ? 'T' : 'F';
            mbtiType += dimensionScores['J'] >= dimensionScores['P'] ? 'J' : 'P';

            return mbtiType;
        }

        // 生成报告
        function generateReport() {
            const mbtiType = calculateMBTI();
            const desc = MBTI_DESC[mbtiType] || MBTI_DESC.ISTJ; // 防止未定义

            // 设置结果页面内容
            document.getElementById('result-title').textContent = `${appState.petType}的性格分析报告`;
            document.getElementById('result-photo').src = appState.photoData;
            document.getElementById('mbti-result').textContent = mbtiType;
            document.getElementById('mbti-name').textContent = desc.name;

            // 设置性格特点
            const traitsList = document.getElementById('traits-list');
            traitsList.innerHTML = '<strong>性格特点:</strong><ul>';
            desc.traits.forEach(trait => {
                traitsList.innerHTML += `<li>${trait}</li>`;
            });
            traitsList.innerHTML += '</ul>';

            // 设置详细分析
            const analysisContent = document.getElementById('analysis-content');
            analysisContent.innerHTML = `
                <p><strong>${desc.description}</strong></p>
                <p><strong>互动建议:</strong><br>${desc.interaction}</p>
                <p><strong>详细描述:</strong><br>${getAnalysisText(mbtiType, appState.petType)}</p>
                <p><strong>饲养建议:</strong><br>${getSuggestions(appState.petType, mbtiType).map(s => `• ${s}`).join('<br>')}</p>
            `;

            // 显示结果页面
            showPage('result');
        }

        // 获取详细分析文本
        function getAnalysisText(mbtiType, petType) {
            const analysisMap = {
                "ISTJ": `您的${petType}是可靠的守护者，注重规律和秩序。它们喜欢可预测的环境和明确的规则，对熟悉的人和事物表现出极大的忠诚。这种性格的${petType}通常会建立固定的生活习惯，比如在特定时间进食、睡觉，甚至上厕所。`,
                "ISTP": `您的${petType}是灵活的实践者，善于解决实际问题。它们喜欢探索环境，通过直接体验来理解世界，对变化有很强的适应能力。这种性格的${petType}通常对各种玩具和设备充满好奇，喜欢拆解和重组物品。`,
                "ISFJ": `您的${petType}是贴心的照顾者，非常关注主人的需求和情绪。它们会建立强烈的归属感，对熟悉的环境表现出极大的依恋。这种性格的${petType}通常非常敏感，能够察觉到主人的情绪变化。`,
                "ISFP": `您的${petType}是温和的艺术家，对美感和舒适有特别的追求。它们喜欢和谐的环境，通过温和的方式表达情感，对冲突非常敏感。这种性格的${petType}通常有自己独特的审美偏好。`,
                "INFJ": `您的${petType}是理想主义的倡导者，对环境和情绪变化非常敏感。它们有强烈的直觉能力，能感知主人的情绪状态并做出反应。这种性格的${petType}通常表现出超越普通宠物的理解力。`,
                "INFP": `您的${petType}是充满创造力的治愈者，有着丰富的内心世界。它们通过独特的方式表达情感，对不公正的环境非常敏感。这种性格的${petType}通常有自己独特的"道德准则"。`,
                "INTJ": `您的${petType}是独立的思想家，善于制定长期计划。它们对环境有很强的控制欲，喜欢按照自己的方式安排生活空间。这种性格的${petType}通常有自己的"领地规划"。`,
                "INTP": `您的${petType}是好奇的探索者，对事物的工作原理充满兴趣。它们会花大量时间观察环境，通过实验了解世界的运作方式。这种性格的${petType}通常对各种机械装置特别着迷。`,
                "ESTP": `您的${petType}是精力充沛的冒险家，喜欢即兴活动和刺激体验。它们对环境变化反应迅速，总是寻找新的探索机会。这种性格的${petType}通常充满活力，喜欢尝试各种新事物。`,
                "ESTJ": `您的${petType}是高效的组织者，喜欢建立明确的日常规律。它们对环境的秩序有强烈需求，会主动维护生活空间的整洁。这种性格的${petType}通常有自己的"规则"。`,
                "ESFP": `您的${petType}是活泼的表演者，喜欢成为关注的焦点。它们通过肢体语言和声音表达情感，善于与主人建立情感连接。这种性格的${petType}通常喜欢热闹的环境，享受被关注的感觉。`,
                "ESFJ": `您的${petType}是社交的协调者，对群体互动有强烈需求。它们会主动参与家庭活动，对家庭成员的情绪变化非常敏感。这种性格的${petType}通常非常关注家庭和谐。`,
                "ENFP": `您的${petType}是热情的激发者，充满好奇心和想象力。它们喜欢探索新环境，通过积极互动建立与主人的深厚情感。这种性格的${petType}通常对各种新玩具和新游戏充满热情。`,
                "ENFJ": `您的${petType}是充满魅力的领导者，善于协调群体关系。它们会主动照顾其他宠物，在家庭中扮演保护者的角色。这种性格的${petType}通常对其他动物表现出关怀。`,
                "ENTP": `您的${petType}是充满创意的探索者，对新奇事物充满好奇。它们喜欢智力挑战，善于发现环境中的新可能性。这种性格的${petType}通常对各种谜题和挑战充满热情。`,
                "ENTJ": `您的${petType}是天生的领导者，喜欢组织和控制环境。它们表现出强烈的自信，在熟悉的环境中会主动建立规则和秩序。这种性格的${petType}通常有自己的"管理"方式。`
            };

            return analysisMap[mbtiType] || `您的${petType}表现出独特的性格特征，需要主人用心观察和理解。这种性格的宠物通常有自己的特殊需求和偏好，主人需要花时间了解TA的个性特点，才能建立更深厚的感情连接。`;
        }

        // 获取饲养建议
        function getSuggestions(petType, mbtiType) {
            const suggestions = [];

            // 通用建议
            if (mbtiType.includes('E')) {
                suggestions.push("提供丰富的社交互动和群体活动");
            } else {
                suggestions.push("提供安静舒适的独处空间");
            }

            if (mbtiType.includes('J')) {
                suggestions.push("保持固定的作息时间和活动安排");
            } else {
                suggestions.push("允许灵活的活动安排和变化");
            }

            // 宠物类型专属建议
            if (petType === "狗") {
                suggestions.push("每天保证足够的户外活动时间");
                if (mbtiType.includes('S')) {
                    suggestions.push("提供结构化的训练和明确的指令");
                } else {
                    suggestions.push("提供探索新环境的机会");
                }
            } else if (petType === "猫") {
                suggestions.push("提供多个休息和观察的高处");
                if (mbtiType.includes('I')) {
                    suggestions.push("设置隐蔽的藏身处供其休息");
                }
            } else if (petType === "仓鼠") {
                suggestions.push("提供充足的藏身空间和磨牙玩具");
                if (mbtiType.includes('P')) {
                    suggestions.push("定期更换玩具保持新鲜感");
                }
            } else if (petType === "龙猫") {
                suggestions.push("保持适宜的温度和湿度环境");
                if (mbtiType.includes('J')) {
                    suggestions.push("固定时间进行沙浴清洁");
                }
            } else if (petType === "荷兰猪") {
                suggestions.push("提供充足的维生素C来源");
                if (mbtiType.includes('E')) {
                    suggestions.push("提供同伴共同生活");
                }
            }

            return suggestions;
        }

        // 保存报告
        function saveReport() {
            try {
                const mbtiType = document.getElementById('mbti-result').textContent;
                const petType = appState.petType;
                const desc = MBTI_DESC[mbtiType] || MBTI_DESC.ISTJ;

                // 创建报告内容
                const reportContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>${petType}性格分析报告</title>
                        <style>
                            body {
                                font-family: 'Noto Sans SC', sans-serif;
                                padding: 30px;
                                max-width: 800px;
                                margin: 0 auto;
                                background-color: #f9f9f9;
                                color: #333;
                            }
                            h1 {
                                color: #FF69B4;
                                text-align: center;
                                margin-bottom: 20px;
                            }
                            .pet-photo {
                                max-width: 100%;
                                height: auto;
                                display: block;
                                margin: 0 auto 30px;
                                max-height: 300px;
                                border-radius: 10px;
                                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                            }
                            .section {
                                margin-bottom: 30px;
                                padding: 20px;
                                background-color: white;
                                border-radius: 10px;
                                box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                            }
                            .section-title {
                                color: #9370DB;
                                border-bottom: 2px solid #FFB6C1;
                                padding-bottom: 5px;
                                margin-bottom: 15px;
                            }
                            .mbti-type {
                                font-size: 24px;
                                font-weight: bold;
                                color: #FF4500;
                                margin-bottom: 10px;
                            }
                            .traits-list li {
                                margin-bottom: 8px;
                                padding-left: 10px;
                            }
                            .footer {
                                text-align: center;
                                color: #888;
                                margin-top: 40px;
                                font-size: 14px;
                                padding-top: 20px;
                                border-top: 1px solid #eee;
                            }
                            .analysis-content {
                                line-height: 1.6;
                            }
                        </style>
                    </head>
                    <body>
                        <h1>${petType}性格分析报告</h1>

                        <img src="${appState.photoData}" alt="${petType}照片" class="pet-photo">

                        <div class="section">
                            <h2 class="section-title">MBTI类型</h2>
                            <div class="mbti-type">${mbtiType} - ${desc.name}</div>
                        </div>

                        <div class="section">
                            <h2 class="section-title">性格特点</h2>
                            <ul class="traits-list">
                                ${desc.traits.map(trait => `<li>${trait}</li>`).join('')}
                            </ul>
                        </div>

                        <div class="section">
                            <h2 class="section-title">详细分析</h2>
                            <div class="analysis-content">
                                <p><strong>${desc.description}</strong></p>
                                <p><strong>互动建议:</strong> ${desc.interaction}</p>
                                <p>${getAnalysisText(mbtiType, petType)}</p>
                            </div>
                        </div>

                        <div class="section">
                            <h2 class="section-title">饲养建议</h2>
                            <ul class="traits-list">
                                ${getSuggestions(petType, mbtiType).map(suggestion => `<li>${suggestion}</li>`).join('')}
                            </ul>
                        </div>

                        <div class="footer">
                            <p>© 2023 宠物MBTI测试 | 报告生成时间: ${new Date().toLocaleString()}</p>
                        </div>
                    </body>
                    </html>
                `;

                // 创建并下载报告
                const blob = new Blob([reportContent], {type: 'text/html'});
                const url = URL.createObjectURL(blob);

                const a = document.createElement('a');
                a.href = url;
                a.download = `${petType}_${mbtiType}_性格分析报告.html`;
                document.body.appendChild(a);
                a.click();

                // 显示下载通知
                const notification = document.getElementById('report-notification');
                notification.style.opacity = 1;
                setTimeout(() => {
                    notification.style.opacity = 0;
                }, 3000);

                // 清理
                setTimeout(() => {
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 100);
            } catch (error) {
                alert(`报告生成失败: ${error.message}`);
                console.error('报告生成错误:', error);
            }
        }
    </script>
</body>
</html>